<template>
  <base-page-view class-name="inventory-details-page">
    <base-nav left-icon="back" left-icon-pic="icon_arror_left">
      <view slot="title" class="nav-title">
        <view>出入库明细</view>
        <image class="icon" src="/static/images/common/icon_rule.png" mode="aspectFit" @click.stop="showRule('inventory')" />
      </view>
    </base-nav>
    <template v-if="list.length>0">
      <view class="main-title">
        <text class="text">总库存 <text class="num">{{ box_stock.stock_number }}</text> {{ box_stock.stock_unit }}</text>
      </view>
      <view v-for="(item, index) in list" :key="index" class="details-list">
        <view class="top-text">
          <view class="title">{{ item.goods_name }}</view>
        </view>
        <view v-if="item.trade_type===11||item.trade_type===12" class="info">
          <text class="name">{{ item.trade_type===11?item.recevice_user_name:item.allocate_user_name }}</text>
          <text class="tel">{{ item.trade_type===11?item.recevice_mobile:item.allocate_mobile }}</text>
        </view>
        <view class="bottom-text">
          <view class="time">{{ item.created_at * 1000 | formatDate('yyyy-MM-dd HH:mm:ss') }}</view>
          <view class="stock" :class="{ success: item.color_type===0 }">
            <!-- <text class="type">{{ typeObj[item.trade_type] }}</text> -->
            <!-- <text class="num">{{ (item.trade_type===1||item.trade_type===7||item.trade_type===99||item.trade_type===12)?'+':'-' }}{{ item.trade_number }}</text> -->
            <text class="type">{{ item.trade_name }}</text>
          </view>
        </view>
      </view>
    </template>
    <base-list-state :list-length="listLength" :list-query="stockQuery" :list-state="listState" :list-empty="listEmpty" />

    <!-- <view v-else class="emptyBox">
      <b-image :src="'/static/images/empty/empty_list.png'" mode="aspectFit" :is-asset="true" width="180" height="180" />
      <view>暂无任何内容</view>
    </view> -->
    <modal ref="ruleModal" :title="ruleData.title" :content="ruleData.content" :btn-text="ruleData.btnText" />
  </base-page-view>
</template>
<script>
import modal from '../components/modal/index'

import { debounce } from '@/utils/tools'
import './index.scss'
export default {
  name: 'InventoryDetails',
  components: {
    modal
  },
  data() {
    return {
      typeObj: {
        '1': '申购入库',
        '2': '提货出库',
        '7': '库存转换',
        '8': '库存转换',
        '11': '库存下拨',
        '12': '库存下拨',
        '99': '其他原因',
        '100': '其他原因'
      },
      ruleData: {
        title: '明细说明',
        content: '1、申购入库：因申购通过后所增加的云仓库存。\n 2、申购出库：因下级发起申购并在审批通过后所扣减的库存。 \n 3、提货出库：因云仓提货所减少的云仓库存。 \n 4、库存转换：因云仓转换而产生的库存增加或减少。 \n 5、其他原因：因退款、线下大额支付等原因，由碧选工作人员操作所产生的库存变更。 \n 6、库存下拨：因云仓库存下拨而产生的库存增加或减少。',
        btnText: '我知道了'
      },
      box_stock: {
        stock_number: '',
        stock_unit: ''
      },
      list: [],
      listState: {
        loading: true,
        more: true
      },
      listEmpty: {
        type: 'empty_list',
        text: '暂无任何内容'
      },
      stockQuery: {
        stock_id: '',
        series_id: '',
        page_no: 1,
        page_size: 10
      }
    }
  },
  computed: {
    listLength() { // 由于微信小程序无法自动更新base-list-state组件,故采用computed
      return this.list.length
    }
  },
  onLoad(option) {
    this.stockQuery.stock_id = option.stock_id
    this.stockQuery.series_id = option.series_id
    this.getDetails()
  },
  onPullDownRefresh() {
    this.stockQuery.page_no = 1
    this.getDetails()
  },
  onReachBottom: debounce(function() {
    if (this.listState.more && !this.listState.loading) {
      this.stockQuery.page_no++
      this.getDetails()
    }
  }, 500),
  methods: {
    async getDetails() {
      this.listState.loading = true
      const res = await this.$api.mineApi.stockDetails({ ...this.stockQuery })
      if (res.success && res.data) {
        const { box_stock, box_stock_details } = res.data
        if (this.stockQuery.page_no === 1) {
          this.list = []
        }
        this.box_stock = box_stock || {}
        this.list = this.list.concat((box_stock_details || []))
        this.listState.more = box_stock_details && (box_stock_details.length === this.stockQuery.page_size)
      }
      setTimeout(() => {
        this.listState.loading = false
        uni.stopPullDownRefresh()
      }, 500)
    },
    showRule() {
      this.$refs.ruleModal.show()
    }
  }
}
</script>
